import React, { Component } from "react";
import { Menu, Icon, Layout } from "antd";

import "./SiderBarComponent.less";
const { Sider } = Layout;

class SiderBarComponent extends Component {
  render() {
    const { collapsed, addTab } = this.props;
    return (
      <Sider
        className="sider_menu"
        trigger={null}
        collapsible
        collapsed={collapsed}
      >
        <div className="logo" />
        <Menu mode="inline" defaultSelectedKeys={["4"]}>
          <Menu.Item key="1">
            <Icon type="user" />
            <span
              className="nav-text"
              onClick={() =>
                addTab({
                  title: "选项卡1",
                  content: "选项卡",
                  closable: true,
                  id: "5"
                })
              }
            >
              nav 1
            </span>
          </Menu.Item>
          <Menu.Item key="2">
            <Icon type="video-camera" />
            <span className="nav-text">nav 2</span>
          </Menu.Item>
          <Menu.Item key="3">
            <Icon type="upload" />
            <span className="nav-text">nav 3</span>
          </Menu.Item>
          <Menu.Item key="4">
            <Icon type="user" />
            <span className="nav-text">nav 4</span>
          </Menu.Item>
        </Menu>
      </Sider>
    );
  }
}
export default SiderBarComponent;
